<template>
    <nav>
        <Button v-for="option in navOptions.options" :key="option.name" class="button"
            :class="{ chosen: navOptions.chosen === option.name }" v-bind="buttonProps(option)">
            <slot :name="option.name"></slot>
        </Button>
    </nav>
</template>

<script lang="ts" setup>
import { NavOptions } from '@/types/ui';
import Button from '@/components/ui/button.vue';
const { navOptions } = defineProps<{ navOptions: NavOptions }>()
const buttonProps = (option: typeof navOptions.options[number]) => {
    const common = navOptions.commonOptions;
    return {
        bgColor: option.bgColor ?? common.bgColor,
        color: option.color ?? common.color,
        disabled: option.disabled ?? common.disabled,
        shape: option.shape ?? common.shape,
        hoveringBorder: option.hoveringBorder ?? common.hoveringBorder,
        size: option.size ?? common.size,
        expandClick: option.expandClick ?? common.expandClick,
    };
};
</script>

<style scoped>
.button {
    margin: 1vh 0;
    transition: 0.1s;
}

.button.chosen {
    transform: translateX(20%);
}
</style>